<template>
  <div>
    <div>
      <van-nav-bar
          title="我的钱包"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div class="accountBalance">
      <span class="s1">账户余额</span>
      <span class="s2">{{balance==null?'0':balance}}₱</span>
      <span class="s3" @click="godetall">明细</span>
    </div>
    <div>
      <van-cell title="账单" @click="gobill" is-link center style="text-align: left;height: 60px"/>
    </div>
    <div style="margin-top: 10px">
      <van-cell title="银行卡" @click="goBankCard" is-link center :value="msg" style="text-align: left;height: 60px"/>
      <van-cell title="充值" is-link center style="text-align: left;height: 60px" @click="gotopup(userMsg.id)"/>
      <van-cell title="提现" is-link center style="text-align: left;height: 60px" @click="gowithdraw"/>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Dialog} from "vant";

export default {
  data() {
    return {
      userMsg:{},
      balance:null,
      msg:'' ,
      login: JSON.parse(localStorage.getItem('login')),
    }
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    this.getUserbyId(parse.registerIp)
    this.getUserbyId1(parse.id)
  },
  methods: {
    getUserbyId1(id){
      // 获取用户信息
      axios.get('http://localhost:11219/mine/mywallet/getuserbyId/'+id).then(res=>{
        this.userMsg=res.data
        this.getBankcard()
      })
    },
    // 获取余额信息
    getUserbyId(id){
      axios.get('http://localhost:11219/mine/mywallet/getuserdetail/'+id).then(res=>{
        this.balance=res.data.accountBalance
      })
    },
    // 跳转到我的页面
    onClickLeft() {
      this.$router.push({
        path: '/mine'
      })
    },
    // 跳转到余额详细页面
    godetall(){
      this.$router.push({
        path: '/detail'
      })
    },
    // 跳转账单页面
    gobill(){
      this.$router.push({
        path: '/bill'
      })
    },
    // 跳转银行卡页面
    goBankCard(){
      this.$router.push({
        path: '/bankcard'
      })
    },
    gotopup(id){
      if(this.login.realNameStatus==1){
        this.$router.push({
          path: '/topup',
          query:{
            id:id
          }
        })
      }else{
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },
    gowithdraw(){
      if(this.login.realNameStatus==1){
        this.$router.push({
          path: '/withdraw'
        })
      }else{
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },
    // 查询当前用户银行卡状态
    getBankcard(){
      axios.get('http://localhost:11219/mine/bankcard/getbankcard/'+this.userMsg.registerIp).then(res=>{
        if(res.data.accountStatus==1){
          this.msg='已绑定'
        }else{
          this.msg='未绑定'
        }
      })
    }
  }
}
</script>

<style scoped>
.accountBalance{
  width: 100%;
  height: 150px;
  background-color: white;
  margin: 10px 0;
}
.accountBalance .s1{
  float: left;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 20px;
}
.accountBalance .s2{
  float: left;
  font-size: 30px;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  margin-top: 60px;
}
.accountBalance .s3{
  float: right;
  margin-top: 70px;
  margin-right: 10px;
}
</style>
